<template>
  <div>
    <section class="title-bar">
      <el-row>
        <el-col :span="22">
          <!-- 使用 @submit 监听表单提交事件，不阻止默认行为 -->
          <el-form :model="searchData" :inline="true" @submit="loadTable">
            <el-form-item>
              <el-input
                  type="text"
                  placeholder="查询模块"
                  v-model="searchData.operation"
                  clearable
                  style="width: 150px"
                  @keyup.enter="loadTable"  ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadTable">查询</el-button>  <!-- 点击按钮时触发 loadTable -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </section>

    <!-- 表格   -->
    <section>
      <el-table :data="tableData.rows" stripe :border="true" style="width: 100%">
        <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作模块"></el-table-column>
        <el-table-column prop="type" label="操作类型">
          <template v-slot:default="scope">
            <el-tag type="primary">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="操作人"></el-table-column>
        <el-table-column prop="time" label="操作时间"></el-table-column>
        <el-table-column prop="ip" label="操作人IP"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template v-slot:default="scope">
            <el-button type="danger" plain @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页   -->
    <section>
      <el-pagination
          @size-change="handlePageSizeChange"
          @current-change="handlePageNowChange"
          :current-page="searchData.pageNow"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
      >
      </el-pagination>
    </section>
  </div>
</template>

<script setup name='LogsManage' lang="ts">
import { deleteByIdApi, loadTableApi } from '@/api/logsApi';
import { ref, reactive, onMounted } from 'vue';
import { useTable } from '@/hooks/useTable';

// 查询参数
let searchFormData = reactive({
  operation: ''
});

let {
  searchData,
  tableData,
  loadTable,
  handlePageSizeChange,
  handlePageNowChange,
  deleteById
} = useTable({ searchFormData, loadTableApi, deleteByIdApi });

// 在组件挂载时自动加载数据
onMounted(() => {
  loadTable();
});
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>